<template>
  <div class="playback-control-panel">
    <div class="tree-header mb-4">
      <h3 class="text-lg font-medium text-gray-700">录像回放</h3>
      
      <!-- 控制面板 -->
      <div class="control-panel mt-4 space-y-3">
        <!-- 通道名称搜索 -->
        <div class="search-input">
          <el-input
            v-model="searchChannelName"
            placeholder="通道名称"
            clearable
            @input="handleSearchInput"
            @clear="handleSearchClear"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
        
        <!-- 日期选择 -->
        <div class="date-picker">
          <el-date-picker
            v-model="selectedDate"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            @change="handleDateChange"
          />
        </div>
        
        <!-- 操作按钮 -->
        <div class="action-buttons flex gap-2 justify-between">
          <el-button 
            @click="handleSyncPlayback"
            :loading="isLoading"
            :disabled="isLoading"
            type="primary"
          >
            同步回放
          </el-button>
          <el-button 
            @click="handleAsyncPlayback"
            :loading="isLoading"
            :disabled="isLoading"
            type="success"
          >
            异步回放
          </el-button>
          <el-button 
            @click="handleDownloadSelected"
            :disabled="isLoading"
            type="warning"
          >
            下载
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  ElInput,
  ElDatePicker,
  ElButton,
  ElIcon
} from 'element-plus'
import { info } from '@/utils/toast'
import {
  Search
} from '@element-plus/icons-vue'

// Emits
const emit = defineEmits<{
  syncPlayback: [selectedCameras: string[]]
  asyncPlayback: [selectedCameras: string[]]
  downloadSelected: [selectedCameras: string[]]
  searchDevices: [keyword: string]
  dateChange: [date: string]
}>()

// Props
interface Props {
  selectedCameras?: string[]
  selectedDate?: string
  isLoading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  selectedCameras: () => [],
  selectedDate: '',
  isLoading: false
})

// 控制面板数据
const searchChannelName = ref('')
const selectedDate = ref(props.selectedDate || new Date().toISOString().split('T')[0]) // 使用props中的值或默认为今天的日期
const searchTimeout = ref<number | null>(null)

// 控制面板方法
const handleSyncPlayback = () => {
  emit('syncPlayback', props.selectedCameras)
}

const handleAsyncPlayback = () => {
  emit('asyncPlayback', props.selectedCameras)
}

const handleDownloadSelected = () => {
  if (props.selectedCameras.length === 0) {
    info('请先选择要下载的摄像头')
    return
  }
  emit('downloadSelected', props.selectedCameras)
}

// 搜索相关方法
const handleSearchInput = (value: string) => {
  // 防抖处理，避免频繁调用接口
  if (searchTimeout.value) {
    clearTimeout(searchTimeout.value)
  }
  
  searchTimeout.value = setTimeout(() => {
    if (value.trim()) {
      emit('searchDevices', value.trim())
    }
  }, 300) // 300ms 防抖
}

const handleSearchClear = () => {
  if (searchTimeout.value) {
    clearTimeout(searchTimeout.value)
  }
  emit('searchDevices', '')
}

// 处理日期变化
const handleDateChange = (date: string) => {
  console.log('PlaybackControlPanel - 日期变化:', date)
  emit('dateChange', date)
}
</script>

<style scoped lang="scss">
.playback-control-panel {
  .tree-header {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 12px;
    flex-shrink: 0;
  }
}

:deep(.el-date-editor) {
  width: 100% !important;
}
</style>
